<template>
	<view>
		<!-- <view class="harders">
		      <view class="status_bar">
		      </view>
			  <view class="u-back-text" @click="back"><</view>
		      <view> 我的网体 </view>
		  </view> -->
		<view class="my_herder">
			<!-- <image   :src="avatar" mode=""></image> -->
			<image class="herder_t"  v-if="avatar!=''" :src="avatar" mode=""></image>
			<image class="herder_t" v-else src="../../static/icon/pic.png" mode=""></image>
			<view class="herder_n">{{ nickname }}</view>
			<!-- <view class="herder_vip">(普通会员)</view> -->
		</view>
		
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabIndex === index }" @click="tabIndex = index">{{ item.text }}</view>
		</view>
		<view class="center">
			<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(item, index) in navList" :key="index">
					<view class="swiper-item">
						<view class="box" v-for="(item, index) in list.data" :key="index">
							<view class="box_name">{{ item.title }}</view>
							<view class="card_box">
								<!-- <view class="card" v-for="(item, index) in m_list" :key="index">
									<image class="ca_img" :src="item.img" mode=""></image>
									<view class="ca_box">
										<view class="ca_name">{{ item.name }}</view>
										<view class="ca_tel">{{ item.tel }}</view>
									</view>
								</view> -->
								<!-- 左 -->
								<view class="list">
									<!-- <view class="card" v-if="item.data.left != null ? (item.data.left != null ? true : false) : false"> -->
									<view class="card" v-if="item.data.left != null">
										<view v-if="item.data.left.avatar == ''"><image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image></view>
										<view v-else>
											<image class="ca_img" :src="item.data.left.avatar" mode=""></image>
											<!-- <view class="out">
											已出局
										</view> -->
										</view>
										<view class="ca_box">
											<view class="ca_name">{{ item.data.left.nickname }}</view>
											<view class="ca_tel">{{ item.data.left.mobile }}</view>
										</view>
									</view>
									<view class="card" v-else>
										<image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image>
										<view class="ca_box"><view class="ca_name">待补位</view></view>
									</view>
						
									<!-- <view class="" v-if="item.data.left != null"> -->
									<view class="card" v-if="item.data.left != null ? (item.data.left.left != null ? true : false) : false">
										<view v-if="item.data.left.left.avatar == ''"><image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image></view>
										<view v-else><image class="ca_img" :src="item.data.left.left.avatar" mode=""></image></view>
										<view class="ca_box">
											<view class="ca_name">{{ item.data.left.left.nickname }}</view>
											<view class="ca_tel">{{ item.data.left.left.mobile }}</view>
										</view>
									</view>
									<view class="card" v-else>
										<image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image>
										<view class="ca_box"><view class="ca_name">待补位</view></view>
									</view>
									<!-- </view> -->
									<!-- <view class="card" v-else>
										<image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image>
										<view class="ca_box"><view class="ca_name">待补位</view></view>
									</view> -->
						
									<view class="card" v-if="item.data.left != null ? (item.data.left.right != null ? true : false) : false">
										<view v-if="item.data.left.right.avatar == ''"><image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image></view>
										<view v-else><image class="ca_img" :src="item.data.left.right.avatar" mode=""></image></view>
										<view class="ca_box">
											<view class="ca_name">{{ item.data.left.right.nickname }}</view>
											<view class="ca_tel">{{ item.data.left.right.mobile }}</view>
										</view>
									</view>
									<view class="card" v-else>
										<image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image>
										<view class="ca_box"><view class="ca_name">待补位</view></view>
									</view>
								</view>
								<!-- 右 -->
								<view class="list">
									<!-- <view class="card1" v-if="item.data.right != null ? (item.data.right != null ? true : false) : false"> -->
									<view class="card1" v-if="item.data.right != null">
										<view v-if="item.data.right.avatar == ''"><image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image></view>
										<view v-else><image class="ca_img" :src="item.data.right.avatar" mode=""></image></view>
										<view class="ca_box">
											<view class="ca_name">{{ item.data.right.nickname }}</view>
											<view class="ca_tel">{{ item.data.right.mobile }}</view>
										</view>
									</view>
									<view class="card1" v-else>
										<image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image>
										<view class="ca_box"><view class="ca_name">待补位</view></view>
									</view>
									<view class="card1" v-if="item.data.right != null ? (item.data.right.left != null ? true : false) : false">
										<view v-if="item.data.right.left.avatar == ''"><image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image></view>
										<view v-else><image class="ca_img" :src="item.data.right.left.avatar" mode=""></image></view>
										<view class="ca_box">
											<view class="ca_name">{{ item.data.right.left.nickname }}</view>
											<view class="ca_tel">{{ item.data.right.left.mobile }}</view>
										</view>
									</view>
									<view class="card1" v-else>
										<image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image>
										<view class="ca_box"><view class="ca_name">待补位</view></view>
									</view>
									<view class="card1" v-if="item.data.right != null ? (item.data.right.right != null ? true : false) : false">
										<view v-if="item.data.right.right.avatar == ''"><image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image></view>
										<view v-else><image class="ca_img" :src="item.data.right.right.avatar" mode=""></image></view>
										<view class="ca_box">
											<view class="ca_name">{{ item.data.right.right.nickname }}</view>
											<view class="ca_tel">{{ item.data.right.right.mobile }}</view>
										</view>
									</view>
									<view class="card1" v-else>
										<image class="ca_img" src="../../static/icon/buwei1@2x.png" mode=""></image>
										<view class="ca_box"><view class="ca_name">待补位</view></view>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="" v-else >
								暂无数据~
							</view> -->
						<!-- <view class="consume-item">
								<view class="item-left">
									<image style="width: 76upx;height: 76upx;margin-right: 20upx;" src="../../static/img/team/icon1.png" mode=""></image>
									<view class="consume-left">
										<view class="item-text">
											<view class="number">昵称：A苗米安娜</view>
											<view class="tag">导购</view>
										</view>
										<view class="time">注册时间：2020-06-29</view>
									</view>
								</view>
								<view class="price">团队45订单</view>
							</view>
							<view class="consume-item">
								<view class="item-left">
									<image style="width: 76upx;height: 76upx;margin-right: 20upx;" src="../../static/img/team/icon1.png" mode=""></image>
									<view class="consume-left">
										<view class="item-text">
											<view class="number">昵称：A苗米安娜</view>
											<view class="tag">导购</view>
										</view>
										<view class="time">注册时间：2020-06-29</view>
									</view>
								</view>
								<view class="price">团队45订单</view>
							</view>
							<view class="consume-item">
								<view class="item-left">
									<image style="width: 76upx;height: 76upx;margin-right: 20upx;" src="../../static/img/team/icon1.png" mode=""></image>
									<view class="consume-left">
										<view class="item-text">
											<view class="number">昵称：A苗米安娜</view>
											<view class="tag">导购</view>
										</view>
										<view class="time">注册时间：2020-06-29</view>
									</view>
								</view>
								<view class="price">团队45订单</view>
							</view> -->
						<!-- </scroll-view> -->
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		

		<!-- <view class="box l_box">
			<view class="box_name">狼人小组</view>
			<view class="card_box">
				<view class="card" v-for="(item, index) in m_list" :key="index">
					<image class="ca_img" :src="item.img" mode=""></image>
					<view class="ca_box">
						<view class="ca_name">{{ item.name }}</view>
						<view class="ca_tel">{{ item.tel }}</view>
					</view>
				</view>
			</view>
		</view> -->
		<view v-if="list.data.length==0" class="not-data">暂无数据</view>
	</view>
</template>

<script>
import service from '@/store/service.js';
export default {
	data() {
		return {
			// box_list:[
			// 	{
			// 		id:0,
			// 		name:'名人小组'
			// 	},
			// 	{
			// 		id:1,
			// 		name:'狼人小组'
			// 	}
			// ],
			nickname: '',
			avatar: '',
			list: [],
			tabIndex: 0,
			show:false,
			navList: [
				{
					text: '当前拼团',
					state: '0',
					type: 1
				},
				{
					text: '拼团记录',
					state: '1',
					type: 2
				}
			],
			m_list: [
				{
					name: '欧阳楠',
					tel: '15882588548',
					img: '../../static/icon/touxiang1@2x.png'
				},
				{
					name: '米欧安',
					tel: '16855584541',
					img: '../../static/icon/touxiang2@2x.png'
				},
				{
					name: '兮兮喵',
					tel: '13254855848',
					img: '../../static/icon/touxiang3@2x.png'
				},
				{
					name: '灿灿',
					tel: '13555585489',
					img: '../../static/a.jpg'
				},
				{
					name: '益阳君',
					tel: '16555555888',
					img: '../../static/s.jpg'
				},
				{
					name: '待补位',
					tel: '',
					img: '../../static/icon/buwei1@2x.png'
				}
			]
		};
	},
	onLoad: function() {
		this.getTeam();
	},
	methods: {
		getTeam() {
			var self = this;
			console.log(self.tabIndex,234);
			if(self.tabIndex==0){
				self.$http.get(service.api.user.team, {
					// out:1
				}).then(function(res) {
					if(res.data[0]){
						self.avatar = res.data[0].member.avatar;
						self.nickname = res.data[0].member.nickname;
					}
					
					self.list = res;
					// if(!res.data[0]){
					// 	self.show=true
					// 	}
				});
			}else{
				self.$http.get(service.api.user.team, {
					out:1
				}).then(function(res) {
					if(res.data[0]){
						self.avatar = res.data[0].member.avatar;
						self.nickname = res.data[0].member.nickname;
					}
					
					self.list = res;
					console.log(res.data);
					// if(!res.data[0]){
					// 	self.show=true
					// 	}
				});
			}
			
		},
		changeTab(e) {
			this.tabClick(e.target.current);
		},
		//顶部tab点击
		tabClick(index) {
			// self.show=false
			this.change(index);
			this.getTeam();
		},
		change(type) {
			this.tabIndex = type;
		}
	}
};
</script>
<style lang="less" scoped>
@a: {
	height: 88rpx;
	text-align: center;
	color: white;
	font-size: 42rpx;
	line-height: 88rpx;
};
//  /deep/	.uni-page-head__title {
// 		color: #19BE6B;
// }

.harders {
	@a();
	position: relative;
	.u-back-text {
		position: absolute;
		left: 20rpx;
	}
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.my_herder {
	width: 100%;
	height: 300rpx;
	background: url(../../static/card/icon7.png);
	background-size: 100% 100%;
	margin-top: -100rpx;
	text-align: center;

	.herder_t {
		width: 135rpx;
		height: 135rpx;
		border-radius: 50%;
		margin-top: 140rpx;
	}

	.herder_n {
		font-size: 42rpx;
		margin-top: -18rpx;
	}

	.herder_vip {
		font-size: 26rpx;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
.l_box {
	margin-top: 28rpx !important;
	margin-bottom: 50rpx;
}
.box {
	width: 90%;
	margin-left: 5%;
	margin-top: 150rpx;
	padding: 30rpx 20rpx;
	border-radius: 20rpx;
	box-shadow: 0px 1px 4px 5px #f6f6f6;
	background-color: #fff;

	.box_name {
		font-size: 28rpx;
		color: rgba(70, 69, 69, 1);
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.card_box {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.card:nth-child(2),
		.card:nth-child(3) {
			background: url(../../static/icon/beijing2@2x.png);
			background-size: 100% 100%;
		}
		// .card:nth-child(3),
		// .card:nth-child(6) {
		// 	background: url(../../static/icon/beijing3@2x.png);
		// 	background-size: 100% 100%;
		// }
		.card {
			// width: 47%;
			height: 156upx;
			text-align: left;
			display: flex;
			align-items: center;
			background: url(../../static/icon/beijing1@2x.png);
			background-size: 100% 100%;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			// justify-content: space-around;
			margin-top: 20rpx;
			width: 312upx;

			.ca_name {
				font-size: 30rpx;
				color: #333333;
			}

			.ca_tel {
				font-size: 22rpx;
				color: #999999;
			}

			.ca_img {
				display: flex;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20upx;
			}
		}
	}
	.card_box {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.card1:nth-child(2),
		.card1:nth-child(3) {
			background: url(../../static/icon/beijing3@2x.png);
			background-size: 100% 100%;
		}
		.card1 {
			// width: 47%;
			height: 156upx;
			text-align: left;
			display: flex;
			align-items: center;
			background: url(../../static/icon/beijing1@2x.png);
			background-size: 100% 100%;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			// justify-content: space-around;
			margin-top: 20rpx;
			width: 312upx;

			.ca_name {
				font-size: 30rpx;
				color: #333333;
			}

			.ca_tel {
				font-size: 22rpx;
				color: #999999;
			}

			.ca_img {
				display: flex;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20upx;
			}
		}
	}
}
.out {
	color: #f81149;
	margin-left: -8upx;
}
.not-data{
	display: flex;
	justify-content: center;
	align-items:center;
}
.navbar {
	background-color: #f3f3f3;
	display: flex;
	// height: 56px;
	// padding: 0 5px;
	justify-content: space-between;
	// box-shadow: 0px 4upx 8upx #dcdfe6;
	position: relative;
	// width: 100%;
	z-index: 200;
	// padding-bottom: 28upx;
	margin-top: 60upx;
	// height: 112upx;
	// width: 100upx;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: #303133;
		position: relative;
		border-radius: 28upx;
		margin: 0 80upx;
		&.current {
			color: #fff;
			// background: linear-gradient(90deg, rgba(233, 144, 64, 1), rgba(255, 127, 77, 1));
			background: #f81149;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 50px;
				height: 0;
				/* border-bottom: 2px solid #fa436a; */
				// border-bottom: 2px solid #f81149;
			}
		}
	}
}
.center {
	width: 100%;
	height: 100%;
	z-index: 120;
	// padding-top: 80upx;
	margin-top: -80upx;
	position: absolute;
}
.swiper-box {
	height: 100%;
}
</style>
